<template>
  <div>
    <el-table
            :data="tableData.slice((currentPage-1)*size,currentPage*size)"
            border
            style="width: 100%">
      <el-table-column
              fixed
              prop="or_id"
              label="订单ID"
              width="80">
      </el-table-column>
      <el-table-column
              prop="ser_id"
              label="服务商ID"
              width="80">
      </el-table-column>
      <el-table-column
              prop="or_kind"
              label="服务类型"
              width="100">
        <template slot-scope="scope">
          <div v-html="format(scope,0)"></div>
        </template>
      </el-table-column>
      <el-table-column
              prop="or_type"
              label="订单状态"
              width="100">
        <template slot-scope="scope">
          <div v-html="format(scope,1)"></div>
        </template>
      </el-table-column>
      <el-table-column
              prop="or_accept"
              label="受理状态"
              width="100">
        <template slot-scope="scope">
          <div v-html="format(scope,2)"></div>
        </template>
      </el-table-column>
      <el-table-column
              prop="or_process"
              label="下一步流程"
              width="100">
      </el-table-column>
      <el-table-column
              prop="or_time"
              label="下单时间"
              width="200">
      </el-table-column>
      <el-table-column
              prop="or_product"
              label="产品名称"
              width="200">
      </el-table-column>
      <el-table-column
              prop="or_money"
              label="商品价格(元)"
              width="120">
      </el-table-column>
      <el-table-column
              prop="or_pay"
              label="是否付款"
              width="120">
        <template slot-scope="scope">
          <div v-html="format(scope,3)"></div>
        </template>
      </el-table-column>
      <el-table-column
              fixed="right"
              label="操作"
              width="300">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="accept(scope.row.or_id,scope.row.or_money)"
                     size="medium"
                     :disabled="scope.row.or_pay !== 0">付款</el-button>
          <el-button type="text"
                     size="medium"
                     @click="reject(scope.row.or_id)"
                     :disabled="scope.row.or_type !== 0">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
    </el-pagination>

    <el-dialog title="支付"
               :visible.sync="pay"
               append-to-body
               width="30%"
    >
      <h3 style="display: inline">支付金额：</h3>
      <h2 style="color: red;display: inline">${{money}}</h2>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pay = false">取消</el-button>
        <el-button type="primary" @click="confirmPay">支付</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import {dictionary} from "../../../utils/allDictionary";
  import buyerMin from "../../../mixin/buyer";


  export default {
    name: "NotPay",
    mixins:[buyerMin],
    mounted() {
      if(!this.$route.params.formData){
        this.formData.ber_id = this.$store.getters.getInfo.ber_id
      }
      else{
        this.formData = this.$route.params.formData
      }
      let url = 'https://haotry.top/api/buyer/getOrder'
      axios.post(url,JSON.stringify(this.formData),{
        headers:{
          'Content-Type':'application/json'
        }
      }).then(res => {
        let data = res.data
        console.log(data)
        if(data.status === 200){
          this.tableData = data.data
        }
        else{

        }
      })
    },
    data(){
      return{
        tableData:[],
        currentPage: 1,
        size : 5,
        formData:{
          ber_id : '',
          or_pay:0
        },
        pay : false,
        money : '',
        id : '',
        comment : false,
        comments : '',
        commentStatus : ''  //1-未评价  2-已评价
      }
    }
  }
</script>

<style scoped>

</style>